<template>
	<view class="cash-details">
		<view class="tab-view">
			<!-- <u-tabs :list="tabs" active-color="#141414" height="100" bar-width="24" font-size="30" inactive-color="#757575"
			 :is-scroll="false" :current="current" @change="change"></u-tabs> -->
			 <picker class="picker" mode="date" @change="timeChange($event,1)">{{ start_time || '开始时间'}}</picker>
			 <text class="split">至</text>
			 <picker class="picker" mode="date" @change="timeChange($event,2)">{{ end_time || '结束时间'}}</picker>
			 <view class="clear" @click="clear">清空</view>
		</view>
		<view class='table_list'>
			<view class="list-content" v-for="(item,index) in list" :key="index">
				<view class='item'>
					<view class='item_middle'>
						<view class='type_tit'>{{item.type_name}}</view>
						<view class='type_tit' style="color: #999; margin-top: 12rpx;">{{item.brief}}</view>
					</view>
					<view class='item_rt'>
						<view class='money'>{{item.money || 200}}</view>
						<view class='timer'>{{item.add_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<pt-nothing text="暂无数据" :fixed="true" v-if="noMore && !list.length" icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>
		<pt-loading-more v-if="loadingMore"></pt-loading-more>
		<pt-nomore v-if="noMore && list.length"></pt-nomore>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page: 0,
				list: [],
				start_time: '',
				end_time: '',
				loadingMore: false,
				noMore: false,
			};
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			if(!this.loadingMore && !this.noMore){
				this.page++
				this.init()
			}
		},
		methods: {
			init() {
				let data = {
					limit: 20,
					page: this.page,
					start_time: this.start_time,
					end_time: this.end_time,
				}
				this.$u.api.BalanceDetail(data).then(res => {
					this.list = this.page==0?res.datas.data:this.list.concat(res.datas.data)
					this.loadingMore = false
					this.noMore = this.list.length >= res.datas.count
				})
			},
			timeChange(e,type){
				if(type==1){
					this.start_time = e.detail.value
				}else if(type==2){
					this.end_time = e.detail.value
				}
				this.noMore = false
				this.list = []
				this.page = 0
				this.init()
			},
			clear(){
				this.start_time = ''
				this.end_time = ''
				this.list = []
				this.page = 0
				this.noMore = false
				this.init()
			},
		}
	}
</script>

<style lang="scss">
	.cash-details {
		page {
			background-color: #fff;
		}

		.tab-view {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			border-bottom: 6rpx solid #eee;
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			.picker{
				flex: 1;
				min-width: 0;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
				border: solid 2rpx #eee;
				font-size: 24rpx;
			}
			.split{
				padding: 0 20rpx;
				font-size: 24rpx;
			}
			.clear{
				margin-left: 30rpx;
			}
		}

		.table_list {
			padding-top: 140rpx;
			.list-content{
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #eee;
				.trans{
					padding: 0 40rpx;
					margin-top: 30rpx;
					color: #999;
					.green{
						color: green;
					}
					.red{
						color: red;
					}
				}
			}
		}

		.table_tit {
			width: 100%;
			background-color: #fff;
			border-top: 10rpx solid #f9f9f9;
			display: flex;
			font-size: 24rpx;
			color: #5E5E5E;
			text-align: center;
		}

		.table_tit view {
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			border-bottom: 1px solid #D2D2D2;
		}

		.table_tit view.active {
			border-bottom: 2px solid #FE9B26;
			color: #FE9B26;
		}

		.table_box {
			width: 100%;
			color: #5E5E5E;
		}

		.item {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			padding: 0 40rpx;
		}

		.item_middle {
			flex: 1;
		}

		.type_tit {
			font-size: 24rpx;
			margin-bottom: 8rpx;
		}

		.item_rt {
			text-align: right;
		}

		.timer {
			color: #C1C1C1;
			margin-top: 12rpx;
		}

		.processed {
			color: #00B7EE;
		}

		.succ {
			color: #FE9B26;
		}
	}
</style>
